<template>
    <div style="margin-top: 60px;">
        <div v-for="archive in archiveBo" :key="archive.date">
            <h3> --- {{archive.date | formatDate}}</h3>
            <li v-for="blog in archive.blogList" class="blog">
                <a href="#" @click.prevent="goToDetail(blog.id)">{{blog.title}}</a>
            </li>
        </div>
    </div>
</template>

<script>

    import archiveApi from "@/api/archive";
    import Format from "@/utils/date";


    export default {
        name: "archive",
        data() {
            return {
                archiveBo: [
                    {
                        date: null,
                        blogList: []
                    },
                ]
            }
        },

        created() {
            this.getArchives();
        },

        methods: {
            getArchives: function () {
                archiveApi.init().then(response => {
                    const resp = response.data;
                    this.archiveBo = resp.data;
                });
            },
            goToDetail: function (id) {
                this.$router.push("/index/blog-detail/" + id);
            },

        },

        filters: {
            formatDate(time) {
                let date = new Date(time);
                return Format.format(date, 'yyyy-MM')
            }
        },

    }
</script>

<style scoped>

    li.blog {
        list-style: none;
        margin-bottom: 56px;
    }

    li.blog > a {
        list-style: none;
        text-decoration: none;
        color: #333;
    }

</style>
